<template>
  <page-header-wrapper>
    <a-card :bordered="false" style="margin-bottom: 24px">
      <div class="contList">
        <div class="item">
          <div class="tit">账户总金额(元)</div>
          <div class="price">¥{{ max_cash }}</div>
        </div>
        <div class="item">
          <div class="tit">冻结金额(元)</div>
          <div class="price">¥{{ moneyFrozen }}</div>
        </div>
        <div class="item">
          <div class="tit">累计金额(元)</div>
          <div class="price">¥{{ moneyTotal }}</div>
        </div>
        <div class="item">
          <div class="tit">已提现金额(元)</div>
          <div class="price">¥{{ moneyCash }}</div>
        </div>
      </div>
    </a-card>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="onChange" :ranges="ranges" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button @click="$refs.table.refresh(true)" type="primary">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <!-- <a-alert message="Info Text" type="info" closable /> -->

      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.type" @change="$refs.table.refresh(1)">
          <a-radio-button :value="item.value" v-for="(item, index) in options" :key="index">
            {{ item.title }}
          </a-radio-button>
        </a-radio-group>

        <a-button @click="exportStoreAccountLogList">导出记录</a-button>
      </div>
      <s-table
        row-key="id"
        size="default"
        :columns="columns"
        :scroll="{ x: 'max-content' }"
        :data="loadData"
        ref="table"
      >
        <span slot="type" slot-scope="type">
          {{ type === '1' ? '收入' : '支出' }}
        </span>

        <span slot="price" slot-scope="price"> ￥{{ price || '0.00' }} </span>
        <span slot="before" slot-scope="before"> ￥{{ before || '0.00' }} </span>
        <span slot="after" slot-scope="after"> ￥{{ after || '0.00' }} </span>
        <span slot="time" slot-scope="text, record">
          {{ record.time > 0 ? $moment(record.time * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>
      </s-table>
    </a-card>

    <a-modal width="700px" v-model="visible" title="拒绝原因" ok-text="确认" cancel-text="取消" @ok="onSubmit">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="活动名称" prop="name">
          <a-input v-model="form.name" allowClear />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { STable } from '@/components'
import { storeAccountLogList, storeMoney, exportStoreAccountLogList } from '@/api/singleFinance'

const columns = [
  {
    title: '余额类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '变动余额',
    dataIndex: 'price',
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '变动前',
    dataIndex: 'before',
    scopedSlots: { customRender: 'before' },
  },
  {
    title: '变动后',
    dataIndex: 'after',
    scopedSlots: { customRender: 'after' },
  },
  {
    title: '变动时间',
    dataIndex: 'time',
    scopedSlots: { customRender: 'time' },
    width: 150,
  },
  {
    title: '说明',
    dataIndex: 'desc',
    width: 300,
  },
]

export default {
  name: 'ShareCash',
  components: {
    STable,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '收入',
          value: 1,
        },
        {
          title: '支出',
          value: 2,
        },
      ],
      tabKey: '',
      selectDate: null,
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {
        start_time: null,
        end_time: null,
        type: -1,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return storeAccountLogList(parameter).then((res) => {
          return res.data
        })
      },

      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        name: '',
      },
      rules: {
        name: [{ required: true, message: '拒绝理由不能为空', trigger: 'blur' }],
      },

      max_cash: '0.00', // 账务总金额
      moneyCash: '0.00', // 已提现
      moneyFrozen: '0.00', // 冻结金额
      moneyTotal: '0.00', // 累计金额
    }
  },
  async created() {
    const res = await storeMoney()
    if (!res.code) {
      let { max_cash, moneyCash, moneyFrozen, moneyTotal } = res.data
      this.max_cash = max_cash || '0.00'
      this.moneyCash = moneyCash || '0.00'
      this.moneyFrozen = moneyFrozen || '0.00'
      this.moneyTotal = moneyTotal || '0.00'
    }
  },
  activated() {},
  watch: {
    visible(e) {
      if (!e) this.resetForm()
    },
  },
  methods: {
    async exportStoreAccountLogList() {
      const hide = this.$message.loading('加载中', 0)
      const res = await exportStoreAccountLogList({
        ...this.queryParam,
        export: 1,
        pageSize: 100000,
      })

      hide()
      if (!res.code) {
        this.$message.success('成功')
      } else {
        this.$message.error(res.msg)
      }
    },

    resetSearchForm() {
      this.queryParam = {
        start_time: moment(new Date()),
        end_time: moment(new Date()),
      }
    },
    moment,
    // 选中日期事件
    calendarChange(date, dateString) {
      // if (date.length <= 1) {
      //   // 选中开始日期事件，设置结束日期必须大于1天
      //   this.selectDate = date[0].add(1, 'days')
      // } else {
      //   this.selectDate = null
      // }
      this.selectDate = date[0]
    },
    // 选择后的事件
    onChange(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
    },
    statusFilter(key) {
      return STATUS[key]
    },
    typeFilter(key) {
      return TYPE[key]
    },
    handleStatus(record, status) {
      var params = {
        id: record.id,
        status: status,
        store_id: -1,
      }
      var returnMsg = '拒绝成功！'
      if (status === 1) {
        returnMsg = '通过成功！'
      }
      applyAudit(params).then((res) => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success(returnMsg)
        }
      })
    },
    handleConfirm(record, status) {
      var params = {
        id: record.id,
        status: status,
      }
      applyConfirm(params).then((res) => {
        this.modalLoading = false
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$refs.table.refresh()
          this.$message.success('处理成功')
        }
      })
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // const hide = this.$message.loading('加载中', 0)
          // let { form } = this
          // const res = await Save(form)
          // hide()
          // if (res.code == 0) {
          //   this.$message.success('创建成功')
          //   this.visible = false
          //   // this.getList()
          //   this.form = {
          //     name: '',
          //   }
          //   return
          // }
          // this.$message.error(res.msg)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
.style-font {
  font-size: 14px;
  font-weight: 500;
}

.button_style {
  margin-top: 3px;
}

.contList {
  display: flex;

  .item {
    position: relative;
    width: 25%;
    text-align: center;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -29px;
      width: 1px;
      height: 58px;
      background: #f0f0f0;
    }

    &:first-of-type:before {
      display: none;
    }
  }

  .tit {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
  }

  .price {
    font-size: 24px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
}

.table-operator {
  margin: 24px 0 16px;
}
</style>
